<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入css文件-->
		<link rel="stylesheet" type="text/css" href="css/7.css"/>
	</head>
	<body>

<div class="msg">
	<div class="w">		
		<!--左边-->
		<div class="left">
			<!--5张图片：并列结构，无序列表-->
			<ul class="big-img">
				<li>
					<!-- img 代表插入图片， src 代表图片路径 -->
					<img src="img/1499641746113986337.jpg"  />
				</li>
			</ul>
		</div>
	</div>
</div>
	</body>
</html>


<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>

<script>
	

// 定义变量，表示当前显示的图片的下标
var i = 0

// 定义1个函数，用于移动到下一张图片
function move() {
	// 序号自增1
	i++ 
	
	// 改变 ul 的 margriLeft 值
	$("ul").css("marginLeft", -800 * i)
}

// 创建定时器，定时指向下一张图片
//   每个3秒，执行move函数（指向下一张图片）
setInterval(move, 3000)




// 找到ul的元素
//   addEventListener 添加事件监听
//   transitionend  动画结束事件
//                     自动执行对应的函数
$("ul")[0].addEventListener("transitionend", function() {
	
	// 只要动画一结束就会自动执行这里的代码
	
	// 0, 1, 2, 3, 4, 5
	
	console.log("当前的图标下标：", i)
	
	// 判断如果已经是最后一张了，那么需要偷梁换柱！
	if (i >= 5) {
		// 立刻换到第一张图片 ==> 改变ul的marginLeft 0
		
		//   切换之前： 关闭动画
		$(".big-img").css("transition", "none")
		
		$("ul").css("marginLeft", 0)
			
		// 因为动画关闭可能存在部分延迟，所以，瞬间切换的代码要稍微晚点执行
		//  延时器 1秒执行
		
		setTimeout(function() {
			
			//   切换之后： 打开动画
			$(".big-img").css("transition", "0.5s")
			
			// 下标重新从0开始计数
			i = 0
		}, 1000)
	}
	
	
})

	
	
</script>

